<template>
  <div>
    <el-dialog width="60%" title="地址详情" :visible.sync="dialogVisible" @close="closeModal">
      <div style="width:60%;">
        <el-form ref="addressForm" :model="form" :rules="rules" size="mini" label-width="120px">
          <el-form-item label="发货地址" prop="addressName">
            <el-input v-model="form.addressName" placeholder="发货地址" />
          </el-form-item>
          <el-form-item label="发货人姓名" prop="name">
            <el-input v-model="form.name" placeholder="发货人姓名" />
          </el-form-item>
          <el-form-item label="发货人手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="发货人手机号" />
          </el-form-item>
          <el-form-item label="邮政编码" prop="postCode">
            <el-input v-model="form.postCode" placeholder="邮政编码" />
          </el-form-item>
          <el-form-item label="收货地址" prop="selectedOptions">
            <el-cascader
              v-model="form.selectedOptions"
              style="width:100%;"
              :options="options"
              @change="addressChange"
            />
          </el-form-item>
          <el-form-item label="详细地址" prop="detailAddress">
            <el-input v-model="form.detailAddress" placeholder="详细地址" />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancleUpdateAddress">取 消</el-button>
        <el-button type="primary" @click="saveAddress">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { regionDataPlus, CodeToText } from 'element-china-area-data'
import {
  save as saveApi,
  update as updateApi,
  getCompanyAddress as getCompanyAddressApi
} from '@/api/order/address'
export default {
  name: 'AddressDialog',
  data() {
    return {
      options: regionDataPlus,
      dialogVisible: false, // 对话框显示与否
      form: {
        selectedOptions: []// 收货地址的详情数组
      },
      addressId: '',
      // selectedOptions: [], // 收货地址的详情数组
      rules: {
        addressName: [{ required: true, trigger: 'blur', message: '请输入您的发货地址' }],
        phone: [
          { required: true, trigger: 'blur', message: '请输入手机号码' },
          { type: 'string', pattern: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/, message: '请输入有效的手机号码' }
        ],
        postCode: [
          { required: true, trigger: 'blur', message: '请输入您的邮政编码' },
          { type: 'number', trigger: 'change', message: '邮政编码应为数字' },
          { trigger: 'blur', pattern: /^\d{6}$/, message: '请输入6为数字的邮编号码' }
        ],
        name: [{ required: true, trigger: 'blur', message: '请输入您的姓名' }],
        detailAddress: [{ required: true, trigger: 'blur', message: '请输入您的详细地址' }],
        selectedOptions: [{ type: 'array', required: true, len: 3, message: '请选择你的收货地址' }]
      }
    }
  },
  methods: {
    // 获取地址详情
    getAddressDetail() {
      getCompanyAddressApi(this.addressId)
        .then(res => {
          const { success, message, data } = res
          if (success) {
            this.form = data.address
            this.form.postCode = parseInt(data.address.postCode)
            this.form.selectedOptions = data.address.cityCode.split(',')
          } else {
            this.$message.error(message)
          }
        })
    },
    // 保存更改地址
    saveAddress() {
      var _this = this
      this.form.postCode = parseInt(this.form.postCode)
      this.$refs.addressForm.validate((valid, error) => {
        if (valid) { // 验证通过
          var api = null
          if (_this.addressId) { // 编辑地址
            api = updateApi
            _this.form.id = _this.addressId
          } else { // 新增地址
            api = saveApi
          }
          api(_this.form)
            .then(res => {
              const { success, message } = res
              if (success) {
                _this.dialogVisible = false
                _this.$emit('refresList')
              } else {
                _this.$message.error(message)
              }
            })
        } else { // 验证不通过
          for (var key in error) {
            if (error[key]) {
              const message = error[key][0].message
              this.$message.error(message)
              return
            }
          }
        }
      })
    },
    // 取消更改地址
    cancleUpdateAddress() {
      this.dialogVisible = false
    },
    // 关闭地址详情模态框
    closeModal() {
      this.dialogVisible = false
      this.form = this.$options.data().form
    },
    // 选择地址
    addressChange(value) {
      this.form.province = CodeToText[value[0]]
      this.form.city = CodeToText[value[1]]
      this.form.region = CodeToText[value[2]]
      this.form.cityCode = value.join(',')
      this.form.receiveStatus = 0
      this.form.sendStatus = 0
    },
    // 打开地址详情模态框
    showModal(id) {
      this.addressId = id
      console.log('id==>', id)
      if (this.addressId) {
        this.getAddressDetail()
      }
      this.dialogVisible = true
    }
  }
}
</script>

<style>

</style>
